<template>
  <!-- 新增入库页面 -->
  <div class="myMessage">
    <el-card body-style="margin-top:20px;" class="searchMessage" shadow="never">
      <el-form ref="searchForm" class="searchForm" :model="searchForm" :inline="true">
        <!-- 选择供应方以及仓库 -->
        <div>
          <!-- 供应方选择 -->
          <el-form-item label="供应方:" prop="contactName">
            <el-input placeholder="请选择供应方" style="width:200px" size="small" @focus="chooseSupplier" />
          </el-form-item>
        </div>
        <div>
          <!-- 仓库选择 -->
          <el-form-item label="仓库:">
            <el-select v-model="searchForm.readState" style="width:250px" size="medium" placeholder="仓库" @change="change">
              <el-option label="未阅" value="0" />
              <el-option label="已阅" value="1" />
              <el-option label="全部" value="2" />
            </el-select>
          </el-form-item>
        </div>
      </el-form>
    </el-card>

    <!-- 选择商品以及商品列表 -->
    <el-card shadow="never" body-style="margin-top:20px;" class="messageList">
      <div slot="header">
        <span> <div class="el-icon-document" />选择商品</span>
      </div>
      <!-- 选择商品表单 -->
      <el-form ref="form" style="display:flex;margin-left:-30px" label-width="110px" :inline="false" size="normal">
        <!-- 商品名称查询 -->
        <el-form-item label="商品名称:">
          <el-input placeholder="商品名称" style="width:200px" size="small" />
        </el-form-item>
        <!-- 商品类型选择 -->
        <el-form-item label="商品类型:">
          <el-select v-model="searchForm.readState" style="width:250px" size="medium" placeholder="商品类型" @change="change">
            <el-option label="未阅" value="0" />
            <el-option label="已阅" value="1" />
            <el-option label="全部" value="2" />
          </el-select>
        </el-form-item>
        <!-- 分类选择 -->
        <el-form-item label="分类:">
          <el-select v-model="searchForm.readState" style="width:250px" size="medium" placeholder="分类" @change="change">
            <el-option label="未阅" value="0" />
            <el-option label="已阅" value="1" />
            <el-option label="全部" value="2" />
          </el-select>
        </el-form-item>
        <!-- 关联商品编号 -->
        <el-form-item label="关联商品编号:">
          <el-input placeholder="关联商品编号" style="width:200px" size="small" />
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item>
          <el-button type="primary" size="small">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        :header-cell-style="{textAlign: 'center'}"
        :cell-style="{ textAlign: 'center' }"
      >
        <el-table-column
          prop="messageNum"
          label="序号"
          width="100"
        />
        <el-table-column
          prop="messageType"
          label="商品名称"
          width="200"
        />
        <el-table-column
          prop="messageTime"
          label="商品类型"
        />
        <el-table-column
          prop="messageContant"
          label="规格"
          width="300"
        />
        <el-table-column
          prop="readState"
          label="指定供应方"
        />
        <el-table-column
          prop="remaks"
          label="十蜂关联商品编号"
        />
        <el-table-column
          label="操作"
          width="400"
        >
          <template>
            <el-button type="text" size="small" @click="checkGoods">查看</el-button>
            <el-button type="text" size="small" @click="select">选中</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <!-- 消息表格分页器 -->
        <el-pagination
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

      <!-- 合计表单 -->
      <el-form ref="form" label-width="100px" :inline="false" size="normal">
        <el-form-item label="合计:">
          <!-- 合计款 -->
          <span style="color:red">100</span>
          <span style="margin-left:10px;font-weight:bold">元</span>
          <!-- 优惠后应付款 -->
          <span style="margin-left:100px;font-weight:bold">优惠后应付:</span>
          <el-input style="width:150px;margin-left:10px" size="mini" placeholder="请输入应付款" />
          <span style="margin-left:10px;font-weight:bold">元</span>
        </el-form-item>

        <el-form-item label="实付:">
          <!-- 实付款 -->
          <el-input style="width:150px;" size="mini" placeholder="请输入实付款" />
          <!-- 欠款 -->
          <span style="margin-left:30px;font-weight:bold">欠款:</span>
          <span style="color:red;margin-left:20px">10.00</span>
          <span style="margin-left:10px;font-weight:bold">元</span>
        </el-form-item>

        <!-- 备注 -->
        <el-form-item label="备注:" size="normal">
          <el-input style="width:400px" type="textarea" max="30" placeholder="30字以内" show-word-limit rows="2" />
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item>
          <el-button type="primary">提交</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>

    </el-card>

    <!-- 查看商品弹框 -->
    <el-dialog center class="forgetPasswordList" width="600px" title="查看商品" :visible.sync="isCheckGoods">
      <el-form ref="form" label-width="80px">
        <!-- 进货单位选择 -->
        <el-form-item label="进货单位:">
          <el-radio-group>
            <el-radio label="袋" />
            <el-radio label="箱" />
          </el-radio-group>
        </el-form-item>
        <!-- 进货价 -->
        <el-form-item label="进货价:">
          <el-input-number v-model="num" :min="1" :max="10" label="价格" @change="handleChange" />
        </el-form-item>
        <!-- 数量 -->
        <el-form-item label="数量:">
          <el-input-number v-model="num" :min="1" :max="10" label="数量" @change="handleChange" />
          <!-- 小计 -->
          <span style="margin-left:50px">小计:</span><span>{{ num*num }}</span>
        </el-form-item>
        <!-- 输入生产日期或者生产批号 -->
        <el-form-item label="日期/批号:">
          <el-input style="width:300px" placeholder="请输入生产日期/生产批号" />
        </el-form-item>
        <!-- 批次 -->
        <el-form-item label="批次:">
          2022011008
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="firstSubmit">确定</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 选择商品选中弹框 -->
    <el-dialog center class="forgetPasswordList" width="600px" title="商品" :visible.sync="isSelectGoods">
      <el-form ref="form" label-width="80px">
        <!-- 进货单位选择 -->
        <el-form-item label="进货单位:">
          <el-radio-group>
            <el-radio label="袋" />
            <el-radio label="箱" />
          </el-radio-group>
        </el-form-item>
        <!-- 进货价 -->
        <el-form-item label="进货价:">
          <el-input-number v-model="num" :min="1" :max="10" label="价格" @change="handleChange" />
        </el-form-item>
        <!-- 数量 -->
        <el-form-item label="数量:">
          <el-input-number v-model="num" :min="1" :max="10" label="数量" @change="handleChange" />
          <!-- 小计 -->
          <span style="margin-left:50px">小计:</span><span>{{ num*num }}</span>
        </el-form-item>
        <!-- 输入生产日期或者生产批号 -->
        <el-form-item label="日期/批号:">
          <el-input style="width:300px" placeholder="请输入生产日期/生产批号" />
        </el-form-item>
        <!-- 批次 -->
        <el-form-item label="批次:">
          2022011008
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="firstSubmit">确定</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 进货明细编辑弹框 -->
    <el-dialog center class="forgetPasswordList" width="600px" title="商品" :visible.sync="isPurchaseDetailsEdit">
      <el-form ref="form" label-width="80px">
        <!-- 进货单位选择 -->
        <el-form-item label="进货单位:">
          <el-radio-group>
            <el-radio label="袋" />
            <el-radio label="箱" />
          </el-radio-group>
        </el-form-item>
        <!-- 进货价 -->
        <el-form-item label="进货价:">
          <el-input-number v-model="num" :min="1" :max="10" label="价格" @change="handleChange" />
        </el-form-item>
        <!-- 数量 -->
        <el-form-item label="数量:">
          <el-input-number v-model="num" :min="1" :max="10" label="数量" @change="handleChange" />
          <!-- 小计 -->
          <span style="margin-left:50px">小计:</span><span>{{ num*num }}</span>
        </el-form-item>
        <!-- 输入生产日期或者生产批号 -->
        <el-form-item label="日期/批号:">
          <el-input style="width:300px" placeholder="请输入生产日期/生产批号" />
        </el-form-item>
        <!-- 批次 -->
        <el-form-item label="批次:">
          2022011008
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="firstSubmit">确定</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 进货明细弹窗 -->
    <el-dialog
      :visible.sync="purchaseDetails"
      width="80%"
      style="margin-top:120px;"
      class="dialog"
    >
      <!-- 进货明细列表 -->
      <el-card shadow="never" body-style="margin-top:20px;" class="messageList">
        <div slot="header" style="display:flex; justify-content: space-between;">
          <span> <div class="el-icon-document" />进货明细</span>
          <span style="padding:0 120px">开单时间:2021-12-12  09:09:34</span>
        </div>
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          :header-cell-style="{textAlign: 'center'}"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            prop="messageNum"
            label="已选商品"
            width="100"
          />
          <el-table-column
            prop="messageType"
            label="型号规格"
            width="200"
          />
          <el-table-column
            prop="messageTime"
            label="进货单价"
          />
          <el-table-column
            prop="messageContant"
            label="进货数量"
            width="200"
          />
          <el-table-column
            prop="readState"
            label="小计"
          />
          <el-table-column
            prop="remaks"
            label="生产日期/批号"
          />
          <el-table-column
            prop="remaks"
            label="批次"
          />
          <el-table-column
            label="操作"
            width="200"
          >
            <template>
              <el-button type="text" size="small" @click="purchaseDetailsEdit">编辑</el-button>
              <el-button type="text" size="small" @click="remark">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <!-- 消息表格分页器 -->
          <el-pagination
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </el-dialog>

  </div>

</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
export default {
// import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      isCheckGoods: false, // 查看商品
      isPurchaseDetailsEdit: false, // 进货明细编辑弹框
      num: 1, // 进货价格
      isSelectGoods: false, // 选择商品选中弹框
      purchaseDetails: false, // 进货明细
      searchForm: {
        value1: [], // 查询日期
        readState: ''
      },
      tableData: [{
        messageNum: '01',
        messageType: '超级管理',
        messageTime: '正常',
        messageContant: '张三的销售单号编号xs21090111627有变化',
        readState: '已阅',
        remaks: '已出库'
      }, {
        messageNum: '02',
        messageType: '超级管理',
        messageTime: '正常',
        messageContant: '张三的销售单号编号xs21090111627有变化',
        readState: '已阅',
        remaks: '已出库'
      }, {
        messageNum: '03',
        messageType: '超级管理',
        messageTime: '正常',
        messageContant: '张三的销售单号编号xs21090111627有变化',
        readState: '已阅',
        remaks: '已出库'
      }],
      currentPage4: 2 // 当前页数
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    checkGoods() { // 查看显示
      this.isCheckGoods = true
    },
    purchaseDetailsEdit() { // 进货明细编辑
      this.isPurchaseDetailsEdit = true
      setTimeout(() => {
        this.purchaseDetails = false
      }, 500)
    },
    firstSubmit() { // 第一次提交弹框表单
      this.purchaseDetails = true
      setTimeout(() => {
        this.isSelectGoods = false
      }, 500)
    },
    handleChange(value) { // 点击弹框进货价加减按钮
      console.log(value)
    },
    select() { // 点击选中 弹进货明细
      this.isSelectGoods = true
    },
    chooseSupplier() { // 选择供应方
      this.$router.push({
        name: 'ChooseSupplier'
      })
    },
    remark() { // 跳转到备注
      this.$router.push({
        name: 'Remark'
      })
    },
    checkMessage() { // 跳转页面到信息详情
      this.$router.push({
        name: 'messageDetail'
      })
    },
    change() { // 更改搜索表单中的阅读状态
      console.log(this.searchForm.readState)
    },
    handleSizeChange(val) { // 分页器事件每页条数
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) { // 分页器事件当前页
      console.log(`当前页: ${val}`)
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style scoped lang="scss">
.myMessage{
  // 页面背景样式
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #f0f2f5;
  .searchMessage{
    // 搜索表单样式
    margin: 30px;
    .searchForm{
      display: flex;
    }
  }
  .messageList{
    //消息列表样式
    margin: 30px;
  }
 .block{//分页器样式
   margin-top: 20px;
     padding: 20px;
     display: flex;
     justify-content: center;
   }

}
</style>
